<template>
  <div class="login font-color">
    <div class="login-main">
      <div class="login-main-cont front-color">
        <div class="login_poster">
          <posterBanner></posterBanner>
        </div>
        <div class="login_area">
          <div class="login_area_auto">
            <div class="index-login">
              <div class="login-head clearfix">
                <h3>{{$t('login.welcomeLogin')}}</h3>
              </div>
            </div>
            <!-- 手机登陆 -->
            <div id="tel-list" class="show">
              <template v-for="(item,key,index) in formList">
                <inline-input
                  :property = "item"
                  v-model = "item.value"
                  @onevents = "somethings"
                  @textOrPassword="textOrPassword">
                </inline-input>
              </template>
              <!-- 阿里云验证 -->
              <template v-if="alYunList.aliyunCapcha">
                <inline-input
                  :property = "alYunList.aliyunCapcha"
                  v-model = "alYunList.aliyunCapcha.value"
                  @onevents = "somethings"
                  @nextActive="nextActive"
                >
                </inline-input>
              </template>
              <!--  @click="submit" -->
              <button :class="{readOnly: !flas1}" class="loginBtn" >{{buttonText}}</button>
              <p class="prom">
                {{$t('login.noAccount')}}
                <router-link to="/register"><i  class="regI">{{$t('login.register')}}</i></router-link>
                <router-link to="/forgetPassword"><i class="forgetPasswordI">{{$t('login.forgetPassword')}}</i></router-link>
              </p>
            </div>
          </div>
        </div>
      </div>
      <!-- 弹窗  -->
      <el-dialog
        title=''
        :flag='loginDialog'
        name= 'loginDialog'
        :width='450'
        :dialogClose='closeDialog'>
        <div slot="operation" class="safeTitle">
          {{$t('myAdd.login.safeVerify')}}
        </div>
        <div class="mobileverify-text" slot="content">
          <!-- 短信验证 -->
          <inline-input
            :property = "getCodes"
            v-model = "getCodes.value"
            @onevents = "somethings">
          </inline-input>
        </div>
        <div slot="options">
          <button class="cancel" @click="closeDialog('closeMobileVerifyDialog')">{{$t('login.cancel')}}</button>
          <button :class="{readOnly: !flas}"  @click="submitCode">{{$t('login.confirm')}}</button>
        </div>
      </el-dialog >
    </div>
  </div>
</template>
<script>
  import InlineInput from '@/components/common/inlineInput'
  import elDialog from '@/components/common/addCommon/dialog'
  import posterBanner from './register/posterBanner'
  export default {
    name: 'login',
    components: {
      InlineInput,
      elDialog,
      posterBanner
    },
    data () {
      return {
        // 默认显示手机登陆
        login: 'telLogin',
        loginDialog: false,
        token: null,
        flas1: true,
        flas: true, // 防止二次点击
        verifiType: '1',
        formList: {},
        getCodes: {},
        alYunList: {} // 阿里云验证
      }
    },
    mounted () {
      this.formList = this.telList
      this.alYunList = this.alyun
    },
    watch: {
      'telList' (val) {
        this.formList = val
      }
    },
    computed: {
      buttonText () {
        if (this.flas1) {
          return this.$t('login.login')
        } else {
          return this.$t('login.loginIng')
        }
      },
      telList () { // 手机登录
        return {
          mobileNumber: {
            // title: this.$t('personal.account'),
            title: '',
            subTitle: this.$t('personal.account'),
            formType: 'text',
            name: 'mobileNumber',
            focus: true,
            value: null,
            placeholder: this.$t('personal.placeholder_14')
            // countryCode: '+86'
          },
          // 密码
          loginPword: {
            // title: this.$t('login.password'),
            title: '',
            subTitle: this.$t('login.password'),
            formType: 'password',
            placeholder: this.$t('personal.placeholder_13'),
            name: 'loginPword',
            value: null,
            isShowEye: true
          }
        }
      },
      alyun () {
        return {
          // 滑动验证
          aliyunCapcha: {
            // title: this.$t('personal.aliyunCapcha'),
            title: '',
            formType: 'aliyunCapcha',
            alicapcha: {},
            scene: 'login'
          }
        }
      },
      emailList () { // 邮箱登录
        return {
          email: {
            // title: this.$t('personal.account'),
            title: '',
            subTitle: this.$t('personal.account'),
            formType: 'text',
            name: 'email',
            placeholder: this.$t('personal.placeholder_15'),
            value: null
          },
          // 邮箱密码
          loginPword: {
            // title: this.$t('login.password'),
            title: '',
            subTitle: this.$t('login.password'),
            formType: 'password',
            name: 'loginPword',
            value: null,
            isShowEye: true
          },
          // 滑动验证
          aliyunCapcha: {
            // title: this.$t('personal.aliyunCapcha'),
            title: '',
            formType: 'aliyunCapcha',
            alicapcha: {},
            scene: 'login'
          }
        }
      },
      getCode () {
        let self = this
        if (this.verifiType === '1') {
          return {
            title: this.$t('personal.googleCode'),
            formType: 'number',
            type: null,
            name: 'googleCode',
            focus: true,
            keyupEnter: function (argument) {
              self.submitCode()
            },
            value: null
          }
        } else if (this.verifiType === '2') {
          return {
            title: this.$t('personal.smsAuthCode'),
            formType: 'verifiCode',
            name: 'smsAuthCode',
            operationType: 25,
            startTime: false,
            data: [],
            focus: true,
            keyupEnter: function (argument) {
              self.submitCode()
            },
            value: null
          }
        } else if (this.verifiType === '3') {
          return {
            title: this.$t('personal.emailValidCode'),
            formType: 'verifiCode',
            name: 'emailValidCode',
            operationType: 4,
            startTime: false,
            data: ['aliyunCapcha', 'email'],
            focus: true,
            keyupEnter: function (argument) {
              self.submitCode()
            },
            value: null
          }
        }
      }
    },
    methods: {
      // 关闭弹框
      closeDialog (e) {
        this.loginDialog = false
        this.getCodes.startTime = false // 关闭倒计时
      },
      somethings (value) {
        if (value.handleType === 'sendCode') {
          this.sendCode(value)
        }
      },
      // tab切换
      togTab (res) {
        this.login = res
        this.formList = {}
        for (let item in this.formList) {
          if (this.formList[item].errorInfo) {
            this.formList[item].errorInfo = null
          }
        }
      },
      sendCode (item) {
        let data = {
          token: this.token
        }
        let fla = true
        if (this.getCodes.startTime) return false
        if (!fla) return false
        data.operationType = this.getCodes.operationType
        this.getCodes.startTime = true // 开启倒计时
        if (this.verifiType === '2') {
          this.commonHttp.smsValidCode(data).then((data) => {
            if (data.code === '0') {
              this.$store.dispatch('setTipState', this.$t('personal.text_8'))
            } else {
              this.getCodes.startTime = false // 关闭倒计时
              this.$store.dispatch('setTipState', {text: data.msg, type: 'error'})
            }
          })
        } else if (this.verifiType === '3') {
          this.commonHttp.emailVaildCode(data).then((data) => {
            if (data.code === '0') {
              this.$store.dispatch('setTipState', this.$t('personal.text_8'))
            } else {
              this.getCodes.startTime = false // 关闭倒计时
              this.$store.dispatch('setTipState', {text: data.msg, type: 'error'})
            }
          })
        }
      },
      submit () {
        let data = {}
        let fla = true
        let nc = ''
        for (let item in this.formList) {
          if (this.formList[item].value !== undefined && !this.formList[item].value) {
            this.$set(this.formList[item], 'errorInfo', this.$t('personal.text_7') + this.formList[item].subTitle)
            fla = false
          } else {
            data[item] = this.formList[item].value
          }
        }
        // start胖虎修改
        if (!this.alYunList.aliyunCapcha.alicapcha.token) {
          fla = false
          this.$set(this.alYunList.aliyunCapcha, 'errorInfo', this.$t('personal.text_6'))
        }
        data = Object.assign({}, this.alYunList.aliyunCapcha.alicapcha, data)
        this.alYunList.aliyunCapcha.alicapcha = {}
        // END 胖虎修改
        nc = data.nc || ''
        // data.nc && data.nc.reset() // 重置滑动验证
        data.nc = null
        if (!fla) {
          nc.reset()
          return false
        }
        if (!this.flas1) return false
        this.flas1 = false
        let loginPword = data.loginPword
        this.axios({
          url: this.$store.state.url.user.login,
          headers: {},
          params: data,
          method: 'post'
        }).then((data) => {
          nc.reset()
          this.flas1 = true
          if (data.code === '0') {
            localStorage.setItem('loginPword', loginPword)
            this.token = data.data.token
            this.verifiType = data.data.type
            this.getCodes = this.getCode
            this.loginDialog = true
            if (this.verifiType === '3' || this.verifiType === '2') {
              this.sendCode()
            }
          } else {
            this.$store.dispatch('setTipState', {text: data.msg, type: 'error'})
          }
        }).catch(() => {
          nc.reset()
          this.flas1 = true
        })
      },
      // 登录第二步 提交验证码
      submitCode () {
        let data = {
          token: this.token
        }
        let fla = true
        if (!this.flas) return false
        if (this.getCodes.value !== undefined && !this.getCodes.value) {
          this.$set(this.getCodes, 'errorInfo', this.$t('personal.text_7') + this.getCodes.title)
          fla = false
        } else {
          data['authCode'] = this.getCodes.value
        }
        if (!fla) return false
        this.flas = false
        this.axios({
          url: this.$store.state.url.user.confirm_login,
          headers: {},
          params: data,
          method: 'post'
        }).then((data) => {
          if (data.code === '0' || data.code === 0) {
            localStorage.setItem('token', this.token)
            this._COOKIE.setCookie('token', this.token)
            this.$store.dispatch('getCommonUser_info') // 请求userInfo
            this.$store.dispatch('setTipState', this.$t('login.loginCuccess'))
            this.closeDialog()
            this.$router.push({ name: 'index' })
          } else {
            this.flas = true
            this.$store.dispatch('setTipState', {text: data.msg, type: 'error'})
          }
        }).catch(() => {
          this.flas = true
        })
      },
      // 胖虎新增
      nextActive () { // 评图验证成功之后触发
        this.submit()
      },
      // 密码表单的显示隐藏
      textOrPassword () {
        this.formList.loginPword.formType = this.formList.loginPword.formType === 'password' ? 'text' : 'password'
      }
    }
  }
</script>
<style lang='stylus' scoped>
  .bottom{
    border-radius:4px 4px 0 0 !important;
  }
</style>
